<template>
  <path :d="d" fill="#fff" :stroke="stroke"/>
</template>

<script>
export default {
  props: {
    position: String,
    width: Number,
    x: Number,
    y: Number,
    cx: Number,
    stroke: String,
    height: Number,
    hasArrow: Boolean
  },

  data () {
    return {
    }
  },

  computed: {
    d () {
      const { x, y, width, height, cx, position } = this
      const x1 = x
      const y1 = y + height
      const x2 = x + height / 2
      const y2 = y + height / 2
      const x3 = x + width - height / 2
      const y3 = y2
      const x4 = x + width
      const y4 = y1

      let d = ''
      if (position !== 'right' && position !== 'center') {
        d += `M${x1} ${y1} ${this.getCurve(x1, y1, x2, y2)}`
      } else {
        d += `M${x1} ${y2}`
      }
      if (this.hasArrow) {
        // 如果中线距离尾部不够一个箭头距离则将中线移至够放一个箭头的距离
        if (position === 'left' && x4 - cx < height) {
          d += ` L${x4 - height} ${y2}`
          d += ` L${x4 - height / 2} ${y}`
          d += ` L${x4} ${y2}`
          return d
        } else if (position === 'right' && cx - x1 < height) {
          d += ` L${x1 + height / 2} ${y}`
          d += ` L${x1 + height} ${y2}`
        } else {
          d += ` L${cx - height / 2} ${y2}`
          d += ` L${cx} ${y}`
          d += ` L${cx + height / 2} ${y2}`
        }
      }
      if (position !== 'left' && position !== 'center') {
        d += ` L${x3} ${y3} ${this.getCurve(x3, y3, x4, y4, false)}`
      } else {
        d += ` L${x4} ${y3}`
      }
      return d
    }
  },

  methods: {
    getCurve (x1, y1, x2, y2, isleft = true) {
      const c = isleft ? `${x1} ${y2}` : `${x2} ${y1}`
      return `C${x1} ${y1} ${c} ${x2} ${y2}`
    }
  }
}
</script>

<style>
</style>
